import _mergeJSXProps from 'babel-helper-vue-jsx-merge-props';
import _extends from 'babel-runtime/helpers/extends';
import './BasicLayout.less';

import PropTypes from 'ant-design-vue/es/_util/vue-types';

import 'ant-design-vue/es/layout/style';
import Layout from 'ant-design-vue/es/layout';

import { ContainerQuery } from 'vue-container-query';
import { SiderMenuWrapper, GlobalFooter } from './components';
import { getComponentFromProp, isFun } from './utils/util';
import { SiderMenuProps } from './components/SiderMenu';
import HeaderView, { HeaderViewProps } from './Header';
import WrapContent from './WrapContent';
import ConfigProvider from './components/ConfigProvider';

export var BasicLayoutProps = _extends({}, SiderMenuProps, HeaderViewProps, {
  locale: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]).def('en-US'),
  breadcrumbRender: PropTypes.func,
  disableMobile: PropTypes.bool.def(false),
  mediaQuery: PropTypes.object.def({}),
  handleMediaQuery: PropTypes.func,
  footerRender: PropTypes.func
});

var MediaQueryEnum = {
  'screen-xs': {
    maxWidth: 575
  },
  'screen-sm': {
    minWidth: 576,
    maxWidth: 767
  },
  'screen-md': {
    minWidth: 768,
    maxWidth: 991
  },
  'screen-lg': {
    minWidth: 992,
    maxWidth: 1199
  },
  'screen-xl': {
    minWidth: 1200,
    maxWidth: 1599
  },
  'screen-xxl': {
    minWidth: 1600
  }
};

var getPaddingLeft = function getPaddingLeft(hasLeftPadding) {
  var collapsed = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
  var siderWidth = arguments[2];

  if (hasLeftPadding) {
    return collapsed ? 80 : siderWidth;
  }
  return 0;
};

var headerRender = function headerRender(h, props) {
  if (props.headerRender === false) {
    return null;
  }
  return h(HeaderView, { props: props });
};

var defaultI18nRender = function defaultI18nRender(key) {
  return key;
};

var BasicLayout = {
  name: 'BasicLayout',
  functional: true,
  props: BasicLayoutProps,
  render: function render(h, content) {
    var props = content.props,
        children = content.children;
    var layout = props.layout,
        isMobile = props.isMobile,
        collapsed = props.collapsed,
        mediaQuery = props.mediaQuery,
        handleMediaQuery = props.handleMediaQuery,
        handleCollapse = props.handleCollapse,
        contentWidth = props.contentWidth,
        siderWidth = props.siderWidth,
        fixSiderbar = props.fixSiderbar,
        _props$i18nRender = props.i18nRender,
        i18nRender = _props$i18nRender === undefined ? defaultI18nRender : _props$i18nRender;


    var footerRender = getComponentFromProp(content, 'footerRender');
    var rightContentRender = getComponentFromProp(content, 'rightContentRender');
    var collapsedButtonRender = getComponentFromProp(content, 'collapsedButtonRender');
    var menuHeaderRender = getComponentFromProp(content, 'menuHeaderRender');
    var breadcrumbRender = getComponentFromProp(content, 'breadcrumbRender');
    var headerContentRender = getComponentFromProp(content, 'headerContentRender');
    var menuRender = getComponentFromProp(content, 'menuRender');

    var isTopMenu = layout === 'topmenu';
    var hasSiderMenu = !isTopMenu;
    // If it is a fix menu, calculate padding
    // don't need padding in phone mode
    var hasLeftPadding = fixSiderbar && !isTopMenu && !isMobile;
    var cdProps = _extends({}, props, {
      hasSiderMenu: hasSiderMenu,
      footerRender: footerRender,
      menuHeaderRender: menuHeaderRender,
      rightContentRender: rightContentRender,
      collapsedButtonRender: collapsedButtonRender,
      breadcrumbRender: breadcrumbRender,
      headerContentRender: headerContentRender,
      menuRender: menuRender
    });

    return h(
      ConfigProvider,
      {
        attrs: { i18nRender: i18nRender, contentWidth: contentWidth, breadcrumbRender: breadcrumbRender }
      },
      [h(
        ContainerQuery,
        {
          attrs: { query: MediaQueryEnum },
          on: {
            'change': handleMediaQuery
          }
        },
        [h(
          Layout,
          { 'class': _extends({
              'ant-pro-basicLayout': true,
              'ant-pro-topmenu': isTopMenu
            }, mediaQuery) },
          [h(SiderMenuWrapper, _mergeJSXProps([{ props: cdProps }, {
            attrs: {
              collapsed: collapsed
            },
            on: {
              'collapse': handleCollapse
            }
          }])), h(
            Layout,
            { 'class': [layout], style: {
                paddingLeft: hasSiderMenu ? getPaddingLeft(!!hasLeftPadding, collapsed, siderWidth) + 'px' : undefined,
                minHeight: '100vh'
              } },
            [headerRender(h, _extends({}, cdProps, {
              mode: 'horizontal'
            })), h(
              WrapContent,
              { 'class': 'ant-pro-basicLayout-content', attrs: { contentWidth: contentWidth }
              },
              [children]
            ), h(Layout.Footer, {style: { display: 'none' }}, [footerRender && (isFun(footerRender) && footerRender(h) || footerRender) || h(GlobalFooter, [h(
              'template',
              { slot: 'links' },
              [h(
                'a',
                {
                  attrs: { href: 'https://www.github.com/vueComponent/', target: '_self' }
                },
                ['Github']
              ), h(
                'a',
                {
                  attrs: { href: 'https://www.github.com/sendya/', target: '_self' }
                },
                ['@Sendya']
              )]
            ), h(
              'template',
              { slot: 'copyright' },
              [h(
                'a',
                {
                  attrs: { href: 'https://github.com/vueComponent' }
                },
                ['vueComponent']
              )]
            )])])]
          )]
        )]
      )]
    );
  }
};

export default BasicLayout;